<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景图片</title>
    <style>
        .box1{
            width: 400px;
            height: 400px;
            background-color: yellow;
            background-image: url(img1/1.jpg);

            /* 
            repeat:默认平铺
            repeat-x:x轴平铺 
            repeat-y:y轴平铺
            no-repeat：不平铺
            */
            background-repeat: no-repeat;
            background-position: right top;
            /*
             1. 20px 20px
             2. 10%  10%
             3.left center right
                top center bottom
             */
             background-size: contain;
             /* 
             1.400px 400px
             2.100% 100% 
             3.cover:把背景图形扩展至足够大，以使背景图像完全覆盖背景区域。
             也许无法显示在背景定位区域中。
             4.contain：把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。铺不满盒子，留空白处。
             */
        }
        .box2{
            width: 300px;
            height: 300px;
            background-color: yellow;
            background-image: url(img1/2.png);
            background-repeat:no-repeat ;
            background-position:right bottom;
            /* 默认平铺 */
            background-size: contain;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>